<template>
	<view class="content">
		<uni-search-bar class="top-search" placeholder="请输入关键字搜索" radius="50" cancelButton="none" @clear="clearKeyword" @confirm="search"/>
		<view class="none" v-if="blogs.length==0">
			<image class="logo" src="/static//icon/nodata.png" mode="widthFix"></image>
			<text class="title">东西某了</text>
		</view>
		<view v-else class="item-container" v-for="i in blogs" :key="i.id" @click="gotoDetail(i.id)">
			
			<image class="item-head" :src="i.user.avatar" mode="aspectFill" @click.stop="showUserInfo(i.user)"></image>
			<text class="item-title">{{i.title}}</text>
			<rich-text :nodes="i.description" class="item-desc"></rich-text>
			<image :src="i.picture" mode="widthFix" class="item-pic"></image>
			<!-- <image src="../../static/icon/ic_share.png" mode="" class="item-right"></image> -->
			<text class="iconfont icon-xiangxia1 img-arrow" @click.stop="popSheet(i.id)"></text>
			<view class="">
				<text v-for="(tag,index) in i.tags" class="item-tag">{{tag}}</text>
			</view>
			<view class="icon-container">
				<text @click.stop="onChangeGood(i,true)" v-if="good_ids.findIndex(e => e.id==i.id) < 0" class="icon iconfont icon-good"></text>
				<text @click.stop="onChangeGood(i,false)" v-else class="icon iconfont icon-good-fill"></text>
				<text>{{i.good}}</text>
				<text class="icon iconfont icon-pinglun"></text>
				<text>{{i.comments.length}}</text>
				<text class="icon iconfont icon-liulan" ></text>
				<text>{{i.readCount}}</text>
			</view>
		</view>
		<view class="foot" v-if="isBottom">已经到底了哦</view>
		
		<dialog-shell ref="user" title="用户信息" @confirm="confirmInfo">
			<text style="padding: 20rpx;">
				<text>昵称：{{user.nickName}}</text>
				<text>邮箱：{{user.email}}</text>
				<text>注册日期：{{user.createTime}}</text>
			</text>
		</dialog-shell>
		
	</view>
</template>

<script>
	let page = 0;
	let size = 3;
	let key_blogs = "blogs";
	

	export default {
		data() {
			return {
				blogs: [],
				count: -1,
				isBottom: false,
				searching:false,
				good_ids:[],
				user:[],
				
			}
		},
		onLoad() {
			//注册通知
			this.$noti.add(this.$params.noti_refresh_count,this.notifyRefreshCount,this)
			this.$noti.add(this.$params.noti_refresh_comment_count,this.notifyRefreshCmtCount,this)
			let blogs = uni.getStorageSync(key_blogs)
			let goods = uni.getStorageSync(this.$params.key_good_ids)
			if(blogs){
				//已有缓存 本地读取
				this.blogs = blogs
				this.count = blogs.length
			}else{
				//网络获取
				this.getData();
			}
			
			if(goods){
				this.good_ids = goods
			}
			
		},
		//监听页面卸载
		onUnload() {
			this.$noti.remove(this.$params.noti_refresh_count,this)
			this.$noti.remove(this.$params.noti_refresh_comment_count,this)
		},
		//下拉刷新
		onPullDownRefresh() {
			page = 0;
			this.blogs = [];
			this.count = -1;
			this.getData();
		},
		//到底部时加载下一页
		onReachBottom() {
			if (this.blogs.length == this.count || this.searching) {
				this.isBottom = true;
				uni.showToast({
					title: "加载完成"
				})
				return;
			}
			page += 1;
			this.getData();
		},
		methods: {
			getData() {
				let header = {
					"content-type": this.$params.content_type,
					"page": page,
					"size": size
				}
				this.$request.getWithHeader(this.$params.host + this.$params.action_blogs_page, header, res => {

					res.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture;
						blog.user.avatar = this.$params.host + blog.user.avatar;
					});
					this.blogs = [...this.blogs, ...res.data]
					uni.setStorageSync(key_blogs,this.blogs)
					this.count = parseInt(res.message);
				}, () => {
					//停止下拉刷新 否则会一直进行刷新
					uni.stopPullDownRefresh()
				});
			},
			
			search(e){
				let kw = e.value;
				if(kw.length>0){
					//发起请求
					//清空列表
					//重置count
					//发起请求:在常量文件中添加搜索地址  使用get方法发起请求  请求结果的处理
					this.blogs = [];
					this.count = -1;
					this.$request.get(this.$params.host+this.$params.action_blogs_search+kw,res=>{
						
						res.data.forEach(blog => {
							blog.picture = this.$params.host + blog.picture;
							blog.user.avatar = this.$params.host + blog.user.avatar;
						});
						this.blogs = [...this.blogs, ...res.data]
						this.count = parseInt(res.data.length);
						// console.log(res.data.length);
						// console.log(this.count);
						this.searching = true;
					},()=>{
						
						// console.log("wancheng");
					});
				}
			},
			clearKeyword(){
				this.count = -1;
				this.blogs  = [];
				this.searching = false;
				this.getData();
			},
			onChangeGood(b,isGood){
				//同步到服务器,并且去最新数据
				let url = this.$params.host + (isGood ? this.$params.action_blogs_good : this.$params.action_blogs_delgood);
				let data = {
					"id":b.id,
				}
				// console.log(b);
				
				this.$request.postParam(url,data,res =>{
					this.blogs.forEach(blog =>{
						if(blog.id == b.id){
							blog.good = res.data;
						}
					})
					let blog_data = {
						"picture":b.picture,
						"id":b.id,
						"title":b.title
					}
					if(isGood){
						this.good_ids.push(blog_data);
					}else{
						this.good_ids.splice(this.good_ids.findIndex(e => e.id==b.id),1);
					}
					uni.setStorageSync(this.$params.key_good_ids,this.good_ids);
					// uni.setStorageSync(key_blogs,this.blogs);
					// console.log(this.good_ids.findIndex(e => e.id==b.id));
				},()=>{
					
				});
			},
			gotoDetail(id){
				uni.navigateTo({
					url: '../blog/blog?id='+id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			popSheet(id){
				uni.showActionSheet({
					itemList: ["删除","收藏"],
					success: res => {
						if(res.tapIndex==0){
							uni.showModal({
								title: 'shanchu',
								content: '确认吗',
								showCancel: true,
								cancelText: '取消',
								confirmText: '删除',
								success: res => {
									if(res.confirm) this.deleteBlog(id)
								},
								fail: () => {
									// console.log(failllll);
								},
								complete: () => {}
							});
						}else if(res.tapIndex == 1){
							uni.showToast({
								title:"已收藏"
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			deleteBlog(id){
				uni.showToast({
					title:"请登录"
				})
			},
			refreshCount(id,count){
				this.blogs.forEach(blog =>{
					if(blog.id == id) {
						blog.readCount =count;
					}
				})
				
			},
			notifyRefreshCount(info){
				this.refreshCount(info.id,info.count);
			},
			notifyRefreshCmtCount(info){
				this.blogs.forEach(blog =>{
					if(blog.id==info.id){
						blog.comments = info.comments;
					}
				})
				
			},
			showUserInfo(user){
				this.$refs.user.show();
				user.createTime = this.$util.formatTime(new Date(user.createTime));
				this.user = user;
			},
			confirmInfo(){
			},
			
			refreshGood(ids){
				uni.setStorageSync(this.$params.key_good_ids,this.good_ids);
				this.good_ids = ids;
			}
			
		}
	}
</script>

<style>
	@import url("index.css");
</style>
